<template>
	<el-dialog v-model="props.isShow" width="26%" close-icon="CloseBold" @close="close">
		<template #header>
			<div class="text-18px font-bold">
				编辑个人资料
			</div>
		</template>
		<div class="mb-20px">
			<div>
				<div class="flex items-center">
					<p class="mr-20px">头像</p>
					<div class="relative hover-div">
						<img src="/person/avatar-null.svg" alt="" class="w-100px h-100px rounded-8px" />
						<div
							class="absolute w-100px h-100px rounded-8px bg-[rgba(64,61,64,0.34)] top-0 left-0 flex items-center justify-center hover-is-active">
							<img src="/person/modify-white.svg" class="w-16px h-16px cursor-pointer" />
						</div>
					</div>
				</div>
				<div class="flex items-center mt-20px">
					<p class="mr-20px w-7%">昵称</p>
					<div class="w-90%">
						<el-input v-model="nickname" placeholder="USER-1" />
						<p class="text-14px text-#86909C mt-10px">一个月仅修改一次</p>
					</div>
				</div>
			</div>
			<div class="mt-60px flex items-center">
				<el-button color="#ECECF0" style="font-size:18px;width:49%;height:50px;" @click="close"> 取消
				</el-button>
				<el-button color="#114CEE" style="font-size:18px;width:49%;height:50px;" @click="confirm"> 确定
				</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';

interface IProps {
	isShow: boolean
	setMethods?: string;
}
const props = defineProps<IProps>();

const emits = defineEmits(['close', 'confirm']);
const nickname = ref<string>('USER-1');
const close = () => {
	emits('close', false)
}

const confirm = () => {
	emits('confirm')
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item--label-top .el-form-item__label:before {
	display: none;
}

::v-deep .el-input__wrapper {
	height: 50px;
}

::v-deep .el-input__inner {
	font-size: 18px;
}

.hover-div {
	.hover-is-active {
		display: none;
	}

	&:hover {
		.hover-is-active {
			display: flex;
		}
	}
}
</style>
